import React, { Component } from "react";

import { Form, Input, InputNumber, Switch, Row, Col, Button } from "antd";

import { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";

interface IProps {
  initialValues: Tenant;
  onFinish: (obj: Tenant) => void;
  disabled?: boolean;
}

interface IState {}

class TenantForm extends Component<IProps, IState> {
  onFinish = (v: Tenant.AsObject) => {
    const values = Object.assign(this.props.initialValues.toObject(), v);

    let tenant = new Tenant();
    tenant.setId(values.id);
    tenant.setName(values.name);
    tenant.setDescription(values.description);
    tenant.setCanHaveGateways(values.canHaveGateways);
    tenant.setMaxGatewayCount(values.maxGatewayCount);
    tenant.setMaxDeviceCount(values.maxDeviceCount);
    tenant.setPrivateGatewaysUp(values.privateGatewaysUp);
    tenant.setPrivateGatewaysDown(values.privateGatewaysDown);

    this.props.onFinish(tenant);
  };

  render() {
    return (
      <Form layout="vertical" initialValues={this.props.initialValues.toObject()} onFinish={this.onFinish}>
        <Form.Item label="租户名" name="name" rules={[{ required: true, message: "Please enter a name!" }]}>
          <Input disabled={this.props.disabled} />
        </Form.Item>
        <Form.Item label="租户描述" name="description">
          <Input.TextArea disabled={this.props.disabled} />
        </Form.Item>
        <Row>
          <Col span={8}>
            <Form.Item
              label="是否有网关"
              name="canHaveGateways"
              tooltip="选中后，租户可以添加网关。请注意，网关的使用不限于此租户，除非它们被标记为私有。"
              valuePropName="checked"
            >
              <Switch disabled={this.props.disabled} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="网关是否上行私有"
              name="privateGatewaysUp"
              tooltip="此租户的网关接收的上行链路只能由此租户的设备使用。"
              valuePropName="checked"
            >
              <Switch disabled={this.props.disabled} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="网关是否下行私有"
              name="privateGatewaysDown"
              tooltip="其他租户不能使用此租户的网关进行下行链路。如果上行链路与其他租户共享，但您希望避免其他租户使用网关的下行链路广播时间，可以使用此功能。"
              valuePropName="checked"
            >
              <Switch disabled={this.props.disabled} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="最大网关数量"
              name="maxGatewayCount"
              tooltip="配置租户最大网关数量，0代表不限制数量."
            >
              <InputNumber min={0} disabled={this.props.disabled} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="最大设备数量"
              name="maxDeviceCount"
              required={true}
              tooltip="配置租户最大终端设备数量，0代表不限制数量.."
            >
              <InputNumber min={0} disabled={this.props.disabled} />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item>
          <Button type="primary" htmlType="submit" disabled={this.props.disabled}>
            保存
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default TenantForm;
